<template>
  <div class="table-main">
    <el-dialog
      :close-on-click-modal="false"
      @close="handMyClose"
      :append-to-body="true"
      title="商铺信息"
      :visible.sync="dialogVisible1"
      width="60%"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="first">
          <div class="form_box">
            <el-form ref="form" :model="form" label-width="120px">
              <el-form-item label="店铺全称:" prop="shopName">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <el-input v-model="form.shopName" placeholder="请输入店铺全程" :disabled="isShow==3"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="银行开户名称:" prop="bankUserName">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <el-input
                      v-model="form.bankUserName"
                      placeholder="请输入银行开户名称"
                      :disabled="isShow==3"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="开票说明:" prop="invoiceRemarks">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <el-input
                      v-model="form.invoiceRemarks"
                      placeholder="请输入开票说明"
                      :disabled="isShow==3"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="是否可以开票:" prop="isInvoice">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <el-radio-group v-model="form.isInvoice" :disabled="isShow==3">
                      <el-radio :label="1" :disabled="isShow==3">是</el-radio>
                      <el-radio :label="2" :disabled="isShow==3">否</el-radio>
                    </el-radio-group>
                    <!-- <el-input v-model="form.isInvoice"></el-input> -->
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="工作时间:" prop="value4">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <el-time-picker
                      :disabled="isShow==3"
                      is-range
                      v-model="value4"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择时间范围"
                      @change="changeTime"
                      value-format="HH:mm"
                    ></el-time-picker>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="店铺地址:" prop="shopAddress">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <el-input
                      :disabled="isShow==3"
                      v-model="form.shopAddress"
                      placeholder="请输入店铺地址"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="店铺图标:" prop="shopIcon">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <img :src="form.shopIcon" class="avatar" />
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="店铺背景:" prop="shopImg">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <el-upload
                      v-if="isShow!=3"
                      class="avatar-uploader"
                      :action="$store.state.app.newUrl+'/admin/wxUser/uoloadfile'"
                      :show-file-list="false"
                      :on-success="handSuccess"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="form.shopImg!=undefined" :src="form.shopImg" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <img v-if="isShow==3" :src="form.shopImg" class="avatar" />
                  </el-col>
                </el-row>
              </el-form-item>

              <el-form-item label="店铺定位:" v-if="isShow!=3">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <div class="map_btn pointer" @click="handMapShow">请选择</div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="经度:" prop="lng">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <el-input v-model="form.lng" disabled placeholder="选择店铺定位,自动获取经纬度"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="纬度:" prop="lat">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <el-input v-model="form.lat" disabled placeholder="选择店铺定位,自动获取经纬度"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="营业状态:" prop="shopAtive">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <el-select :disabled="isShow==3" v-model="form.shopAtive" placeholder="请选择">
                      <el-option
                        v-for="item in shopStatusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="店铺公告:" prop="shopNotice">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <el-input
                      :disabled="isShow==3"
                      v-model="form.shopNotice"
                      type="textarea"
                      placeholder="请输入店铺公告"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="附加内容" name="second">附加内容</el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="handFromSub" v-if="isShow!=3">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="选择商铺位置"
      :visible.sync="dialogVisible"
      width="50%"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <div style="margin-bottom:30px">
        <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>
      </div>
      <baidu-map
        class="bmView"
        :scroll-wheel-zoom="true"
        :center="location"
        :zoom="zoom"
        @click="getLocationPoint"
        ak="YOUR_APP_KEY"
      >
        <bm-view style="width: 100%; height:300px; flex: 1"></bm-view>
        <bm-local-search
          @infohtmlset="handAddoverlay"
          :keyword="addressKeyword"
          :auto-viewport="true"
        ></bm-local-search>
      </baidu-map>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="handSubMap()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :append-to-body="true" :visible.sync="dialogVisible2" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmView from 'vue-baidu-map/components/map/MapView.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
import { imgSizi } from '@/utils/myUtils'
export default {
  name: 'SidebarLogo',
  components: {
    BaiduMap,
    BmView,
    BmLocalSearch
  },
  watch: {
    isState(newObj) {
      this.isShow = newObj
    }
  },
  props: {
    isState: {
      type: Number,
      default: 0
    },
    newId: {
      type: Number
    }
  },
  data() {
    return {
      form: {},
      isShow: 0,
      imageUrl: '',
      dialogImageUrl: '',
      dialogVisible2: false,
      dialogVisible1: false,
      shopStatusOptions: [
        {
          label: '营业中',
          value: 1
        },
        {
          label: '休息',
          value: 2
        },
        {
          label: '冻结',
          value: 3
        }
      ],
      location: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 12.8,
      addressKeyword: '',
      activeName: 'first',
      value4: [new Date(2020, 9, 10, 0, 0), new Date(2020, 9, 10, 24, 0)],
      dialogVisible: false
    }
  },
  mounted() {},
  methods: {
    handMyClose() {
      console.log('???关闭了吗')
      this.dialogVisible1 = false
      this.$refs.form.resetFields()
      this.$parent.closeFrom()
    },
    handGetShop(id) {
      console.log(id, '?')
      this.$api.getByIdShopt(id).then(res => {
        this.form = res.data.data
        console.log('查询店铺详情2', res)
        this.value4 = [
          new Date(
            2020,
            9,
            10,
            this.form.serviceStartTime.slice(0, 2),
            this.form.serviceStartTime.substring(
              this.form.serviceStartTime.length - 2
            )
          ),
          new Date(
            2020,
            9,
            10,
            this.form.serviceEndTime.slice(0, 2),
            this.form.serviceEndTime.substring(
              this.form.serviceEndTime.length - 2
            )
          )
        ]
      })
      console.log('获取详情')
    },
    handFromSub() {
      // console.log(this.form.shopAtive)
      // this.form.shopAtive = this.shopStatusOptions.find(
      //   item => item.label == this.form.shopAtive
      // ).value

      //1编辑
      if (this.isState == 1) {
        this.$api.getShopEdit(this.form).then(res => {
          this.dialogVisible1 = false
          this.$parent.init()
          console.log(res, '编辑', this.form)
          this.$message({
            message: res.data.message,
            type: 'success'
          })
        })
      } else if (this.isState == 0) {
        let shop = this.form
        this.$api.getShopAdd(shop).then(res => {
          this.dialogVisible1 = false
          this.$parent.init()
          this.$refs.form.resetFields()
          console.log(res, '添加商铺', this.form)
          this.$message({
            message: res.data.message,
            type: 'success'
          })
        })
      }
    },

    handSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw)
      // this.form.shopImg = res.message
      this.$set(this.form, 'shopImg', res.message)
      console.log(this.form.shopImg, '????')
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      const isJPG = file.type === 'image/jpeg'
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return isSize
      }
      const isSize = imgSizi(file, 180, 180)
      return isSize
    },

    // handSuccess(response, file, fileList) {
    //   console.log(response, file, fileList, '成功回调')
    //   this.form.shopImg = response.message
    // },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url
    //   this.dialogVisible2 = true
    // },
    handleClose() {
      this.dialogVisible = false
    },
    handMapShow() {
      this.dialogVisible = true
    },
    handleClick() {},
    changeTime(e) {
      this.form.serviceStartTime = e[0]
      this.form.serviceEndTime = e[1]
    },
    handAddoverlay(e) {
      this.form.lng = e.point.lng
      this.form.lat = e.point.lat
    },
    getLocationPoint(e) {
      this.lng = e.point.lng
      this.lat = e.point.lat

      /* 创建地址解析器的实例 */
      let geoCoder = new BMap.Geocoder()

      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, point => {
        this.form.lng = point.lng
        this.form.lat = point.lat
      })
      /* 利用坐标获取地址的详细信息 */
      geoCoder.getLocation(e.point, res => {
        console.log(res.point)
        this.form.lng = res.point.lng
        this.form.lat = res.point.lat
      })
    },
    handSubMap() {
      // let geoCoder = new BMap.Geocoder();
      // /* 获取位置对应的坐标 */
      // geoCoder.getPoint(this.addressKeyword, point => {
      //   // this.form.lng = point.lng;
      //   // this.form.lat = point.lat;
      //   this.$set(this.form, "lng", point.lng);
      //   this.$set(this.form, "lat", point.lat);
      //   console.log(point, "拿得到经纬度吗?");
      // });
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.map_btn {
  width: 82px;
  height: 22px;
  background: rgba(56, 173, 147, 1);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  margin-top: 8px;
}
/deep/ .el-form-item__label {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.form_box {
  width: 80%;
  margin: 0 auto;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #38ad93;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #38ad93;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
